<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <button id="btn">节流</button>
    <script>
      btn.onclick = debounce(cb, 2000);
      
      // 防抖的工具函数
    
      function debounce(callback, time) {
        // 用来保存一个待执行延迟任务(定时器)
        let timeoutId;
        return function (e) {
          console.log("debounce.....");

          // 将前面已经但还未执行的调用回调的延迟任务给取消
          if (timeoutId) {
            clearTimeout(timeoutId);
          }
          // 启动一个新的定时器, 准备执行回调处理, 将保存定时器的id
          timeoutId = setTimeout(() => {
            // 调用回调处理
            callback.call(this, e);
            // 重置定时器id
            timeoutId = null;
          }, time);
        };
      }

      function cb(e) {
        console.log("节流", e.target);
      }

      /*
    函数防抖：将多次操作合并为一次操作进行。原理是维护一个计时器，规定在delay时间后触发函数，
    但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。
    这样一来，只有最后一次操作能被触发。
    */
      // 区别：函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。
    </script>
  </body>
</html>
